<template lang="pug">
    div(id="main",style="height:100%")
</template>
<script>
    import echarts from 'echarts/lib/echarts'
    import 'zrender/lib/svg/svg';
    import 'echarts/lib/chart/bar';
    export  default {
        name: 'rate-chart',
        data(){
            return{
                chart: null,
            }
        },
        props:{
            activeIndex: {type:Number, default: null},
            data: {type:Array}, // 一维数组
        },
        model:{
            event: 'update',
            prop:'data'
        },
        watch:{
            activeIndex(){
                this.updateChart()
            },
            data(){
                this.updateChart()
            }
        },
        methods:{

            updateChart(){
                const vm = this;
                //  this.data.sort((a,b)=> (return a-b))
                this.chart.setOption({
                    zlevel:0,
                    z:0,
                    title: {
                        text: ''
                    },
                    tooltip: {},
                    xAxis: {
                        data: [],
                    },
                    yAxis: {
                        axisLabel:{
                            formatter(){return ""}
                        },
                        max: 5
                    },
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: this.data,
                        z:0,
                        itemStyle:{
                            normal:{
                                color(params){
                                    if(vm.activeIndex == params.dataIndex) return "#0099ff"
                                    return "#333"
                                }
                            }
                        }
                    }]
                });
            }
        },
        mounted(){
            setTimeout(function () {
                this.chart = echarts.init(document.getElementById('main'),null,{renderer: 'svg'});
                this.updateChart();
            }.bind(this), 100)
        }
    }
</script>
<style lang="less">
    #main {
        div {
            z-index:0!important;
            canvas {
                height: 100% !important;
            }
        }
    }
</style>